<!DOCTYPE HTML>
<html>
<head>
    <title>登录/注册 - 二手电子乐园</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
    <div id="page-wrapper">

        <!-- Header -->
        <div id="header-container"></div>

        <!-- Main -->
        <div id="main-wrapper">
            <div class="container">
                <div class="row gtr-200">
                    <div class="col-6 col-12-medium">
                        
                        <!-- 登录表单 -->
                        <section>
                            <header>
                                <h2>用户登录</h2>
                                <p>登录后享受更多服务</p>
                            </header>
                            <form id="loginForm">
                                <div class="row gtr-50">
                                    <div class="col-12">
                                        <label for="login-username">用户名/手机号</label>
                                        <input type="text" id="login-username" name="username" required />
                                    </div>
                                    <div class="col-12">
                                        <label for="login-password">密码</label>
                                        <input type="password" id="login-password" name="password" required />
                                    </div>
                                    <div class="col-12">
                                        <ul class="actions">
                                            <li><input type="submit" value="登录" class="primary" /></li>
                                            <li><input type="reset" value="重置" /></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                            <p><small>测试账号：用户名 zhangsan，密码 66666666</small></p>
                        </section>

                    </div>
                    <div class="col-6 col-12-medium">
                        
                        <!-- 注册表单 -->
                        <section>
                            <header>
                                <h2>新用户注册</h2>
                                <p>注册成为会员，享受更多服务</p>
                            </header>
                            <form id="registerForm">
                                <div class="row gtr-50">
                                    <div class="col-12">
                                        <label for="register-username">用户名</label>
                                        <input type="text" id="register-username" name="username" required />
                                    </div>
                                    <div class="col-12">
                                        <label for="register-phone">手机号</label>
                                        <input type="tel" id="register-phone" name="phone" required />
                                    </div>
                                    <div class="col-12">
                                        <label for="register-email">邮箱</label>
                                        <input type="email" id="register-email" name="email" required />
                                    </div>
                                    <div class="col-12">
                                        <label for="register-verify">验证码</label>
                                        <input type="text" id="register-verify" name="verify" required />
                                    </div>
                                    <div class="col-12">
                                        <label for="register-password">密码</label>
                                        <input type="password" id="register-password" name="password" required />
                                    </div>
                                    <div class="col-12">
                                        <label for="register-confirm">确认密码</label>
                                        <input type="password" id="register-confirm" name="confirm" required />
                                    </div>
                                    <div class="col-12">
                                        <ul class="actions">
                                            <li><input type="submit" value="注册" class="primary" /></li>
                                            <li><input type="reset" value="重置" /></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </section>

                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div id="footer-container"></div>

    </div>

    <!-- Scripts -->
    <script src="utils/loader.js"></script>
    <script>
        // 等待脚本加载完成
        window.addEventListener('scriptsLoaded', function() {
            // 加载公共组件
            $('#header-container').load('header.html');
            $('#footer-container').load('footer.html');

            // 登录表单处理
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();
                const username = $('#login-username').val();
                const password = $('#login-password').val();

                // 测试账号验证
                if (username === 'zhangsan' && password === '66666666') {
                    localStorage.setItem('isLogin', 'true');
                    localStorage.setItem('username', username);
                    alert('登录成功！');
                    window.location.href = 'index.html';
                } else {
                    alert('用户名或密码错误！');
                }
            });

            // 注册表单处理
            $('#registerForm').on('submit', function(e) {
                e.preventDefault();
                const password = $('#register-password').val();
                const confirm = $('#register-confirm').val();

                if (password !== confirm) {
                    alert('两次输入的密码不一致！');
                    return;
                }

                alert('注册成功！请等待管理员审核。');
                this.reset();
            });
        });
    </script>
</body>
</html>